<template>
	<div class="psc">
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>有功功率</p>
				</div>
				<div class="echats-con">
					<xtxlPSC :id="id" :cname="cname" />
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>SOC</p>
				</div>
				<div class="echats-con">
					<SOCLine :id="id" />
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>近7日充放电量</p>
				</div>
				<div class="echats-con">
					<the7CGED :id="id" :cname="cname" />
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>{{ cname }}基本运行信息</p>
				</div>
				<div class="echats-con">
					<div class="flex" style="flex-wrap: wrap">
						<div class="yxxx-item">
							<p>{{ info.state | stateFilter }}</p>
							<p>运行状态</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.mode | modeFilter }}</p>
							<p>工作模式</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.bmsState | bmsStateFilter }}</p>
							<p>BMS运行状态</p>
						</div>
						<div class="yxxx-item">
							<p>{{ SOC }}%</p>
							<p>SOC值</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.Preal }}kW</p>
							<p>有功功率</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.Qreal }}kVar</p>
							<p>无功功率</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.SOPC }}kW</p>
							<p>可充功率</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.SOPDC }}kW</p>
							<p>可放功率</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>遥测数据</p>
					<div class="btns" style="top: 2px">
						<el-input
							size="mini"
							placeholder="输入遥测名称筛选"
							v-model="selectValue"
							clearable
						>
						</el-input>
					</div>
				</div>
				<div class="echats-con">
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<div class="table-yysj">
							<div
								class="yysj-item flex"
								:class="yysj_itemActive == item.index ? 'yysj-itemActive' : ''"
								v-for="item in ycListARR1"
								:key="item.id"
								@click="getYCXX(item)"
							>
								<div>{{ item.ycName }}</div>
								<div>{{ item.value }}</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>遥测运行曲线</p>
				</div>
				<div class="echats-con">
					<soc1
						:info="{ xData, yData: yData1, unit: '', cname: '遥测运行曲线' }"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import dayGl from "./components/dayGl.vue";
import xtxl from "./components/xtxl.vue";
import xtxlPSC from "./components/xtxlPSC.vue";

import { findDataByDevIdAndName } from "@/api/modules/home.js";
import { ycList, ycInfo } from "@/api/modules/energyunit";
import { getSOC } from "@/api/modules/psc";
import soc1 from "./components/soc1.vue";
import SOCLine from "./components/SOCLine.vue";
import the7CGED from "./components/the7CGED.vue";

export default {
	components: { dayGl, xtxl, xtxlPSC, soc1, SOCLine, the7CGED },
	props: {},
	data() {
		return {
			id: this.$route.query.id ? this.$route.query.id : "114278840544526337",
			cname: this.$route.query.name ? this.$route.query.name : "1#PCS",
			selectValue: "",
			info: {},
			yysj_itemActive: "",
			xData: [],
			yData1: [],
			// 交流电
			jld: {
				xData: ["Uab", "Ubc", "Uca"],
				yData: [],
				name: "",
			},
			ycListARR: [],
			gjxxList: [],
			timer: null,
			SOC: null,
		};
	},
	destroyed() {
		clearInterval(this.timer); //页面销毁时清除定时器
	},
	computed: {
		ycListARR1() {
			let self = this;
			return this.ycListARR.filter(function (data) {
				//只返回id是偶数的
				if (self.selectValue) {
					return data.ycName.indexOf(self.selectValue) > -1;
				} else {
					return data;
				}
			});
		},
	},
	methods: {
		getYCXX(item) {
			let self = this;
			this.yysj_itemActive = item.index;
			self.xData = [];
			self.yData1 = [];
			ycInfo({ devId: item.devId, sampleName: item.name }).then((res) => {
				let data = res.data;
				for (let index = 0; index < data.length; index++) {
					let element = data[index];
					self.xData.push(element.date);
					self.yData1.push(
						element.graphHisDTO ? element.graphHisDTO.value : ""
					); //实时有效功率
				}
			});
		},
		getDate() {
			// PCS基本运行信息/直流电压
			// pcsInfo({ id: this.id }).then((res) => {
			// 	this.info = res.data
			// 	this.jld.name = res.data.cname
			// 	this.jld.yData = [res.data.vab, res.data.vbc, res.data.vca]
			// })
			findDataByDevIdAndName({
				devId: this.id,
				sampleName: "Preal,Qreal,SOPC,SOPDC",
			}).then((res) => {
				if (res.code == 200) {
					this.info = res.data;
				}
			});
			getSOC({
				devId: this.id,
				sampleName: "SOC",
			}).then((res) => {
				if (res.code == 200) {
					this.SOC = res.data.SOC;
				}
			});

			ycList({ devId: this.id }).then((res) => {
				if (res.code == 200) {
					res.data.forEach((item, index) => {
						item.index = index;
					});
					this.ycListARR = res.data;
					if (this.ycListARR.length > 0) {
						this.getYCXX(this.ycListARR[0]);
					}
				}
			});

			// realtimeInfo({ id: this.id }).then((res) => {
			// 	if (res.code == 200) {
			// 		this.gjxxList = res.data;
			// 	}
			// });
		},
	},
	created() {},
	mounted() {
		this.getDate();
		if (this.timer) {
			clearInterval(this.timer);
		} else {
			this.timer = setInterval(() => {
				this.getDate();
			}, 60000);
		}
	},
};
</script>
<style lang="scss">
.psc {
	width: 100%;
	/* height: 100%; */

	.warning-top {
		display: flex;
		justify-content: space-around;
		position: relative;
		gap: 40px 20px;
		margin-bottom: 20px;

		.warning-item {
			height: 330px;
			flex: 1;

			.xfxx-item {
				width: calc(100% - 40px);
				min-height: 30px;
				margin: 5px 13px 0 13px;

				position: relative;

				background: rgba(255, 255, 255, 0.01);
				border-radius: 0px 0px 0px 0px;
				border: 1px solid #244c8c;

				div {
					padding-left: 10px;
				}

				span {
					font-weight: 400;
					font-size: 12px;
					color: #ffffff;
					line-height: 30px;
					text-align: left;
					/* padding-left: 10px; */
				}
			}

			.yysj-itemActive {
				background: #46559d;
			}

			.echats-con {
				width: 100%;
				height: calc(100% - 52px);

				.yxxx-item {
					width: 23.4%;
					height: 131px;
					background: #05153c;
					border-radius: 4px 4px 4px 4px;
					margin: 10px 0px 0 10px;

					p {
						text-align: center;

						&:first-child {
							height: 40px;
							font-weight: 500;
							font-size: 22px;
							color: #3fd1ff;
							line-height: 40px;
							margin-top: 32px;
						}

						&:last-child {
							height: 20px;
							font-weight: 300;
							font-size: 14px;
							color: #ffffff;
							line-height: 20px;
						}
					}
				}
			}
		}
	}
}
</style>
